<template>
	<view class="yc_main">
		<view class="bg_ff">
			<view class="common_width">
				<view class="blank_box_mini"></view>
				<u-divider text="时间记录" textSize="16"></u-divider>
				<view class="common_form">
					<view class="form_item space_between">
						<view class="label">日期 </view>

						<picker mode="date" :value="form.record_date" @change="changeDate">
							<view class="content">
								<text class="mr10">
									{{ form.record_date }}
								</text>
								<u-icon name="calendar" size="28"></u-icon>
							</view>
						</picker>
					</view>
					<view class="form_item space_between">
						<view class="label">开始时间 </view>
						<picker mode="time" :value="form.record_begin" @change="changeBegin">
							<view class="content">
								<text class="mr10">
									{{ form.record_begin }}
								</text>
								<u-icon name="clock" size="22"></u-icon>
							</view>
						</picker>
					</view>
					<view class="form_item space_between">
						<view class="label">结束时间 </view>
						<picker mode="time" :value="form.record_end" @change="changeEnd">
							<view class="content">
								<text class="mr10">
									{{ form.record_end }}
								</text>
								<u-icon name="clock" size="22"></u-icon>
							</view>
						</picker>
					</view>
					<view class="form_item space_between">
						<view class="label">类别 </view>
						<picker :range="typeList" range-key="name" :value="typeIndex" @change="changeType">
							<view class="content">
								<text class="mr10"> {{ typeName }} </text>
								<u-icon name="arrow-down" size="20"></u-icon>
							</view>
						</picker>
					</view>
					<view class="form_item space_between">
						<view class="label">备注 </view>

						<view class="content">
							<input type="text" class="pct100 tr" maxlength="20" v-model="form.remark" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p40">
			<view class="p20">
				<u-button type="primary" @click="submit">提交</u-button>
			</view>
			<view class="p20">
				<u-button type="error" @click="deleteRecord">删除</u-button>
			</view>
		</view>
	</view>
</template>

<script>
let tagInfo = "[/pages/.vue]";
import basePage from "@/libs/base-page.js";
import dayjs from "dayjs";
import Manager from "../../libs/model/Manager";
import UniHelper from "../../libs/util/UniHelper";
export default {
	mixins: [basePage],
	data() {
		return {
			id: 0,
			form: {
				record_date: "",
				record_begin: "",
				record_end: "",
				type_id: "",
				remark: ""
			},
			value1: "11:00",
			show: false,
			typeList: [],
			typeIndex: 0,
			typeName: ""
		};
	},
	onLoad(options) {
		if (options.id) {
			this.id = options.id;
		}
		this.loadData();
	},
	methods: {
		async loadData() {
			//this.initSaveData();
			let res = await Manager.recordTypeList();
			if (res.code != 0) {
				return;
			}
			this.typeList = res.data;
			if (this.id == 0) {
				this.form.type_id = this.typeList[0].id;
				this.typeName = this.typeList[0].name;
				this.form.record_date = dayjs().format("YYYY-MM-DD");
				this.form.record_end = dayjs().format("HH:mm");
				this.form.record_begin = dayjs().add(-1, "hour").format("HH:mm");
				return;
			}
			res = await Manager.recordDetail(this.id);
			if (res.code != 0) {
				this._util.message.alert(res.msg);
				return;
			}

			this.typeName = res.data.type.name;
			this.form.id = res.data.id;
			this.form.type_id = res.data.type_id;
			this.form.record_date = res.data.record_date;
			this.form.record_end = res.data.record_end;
			this.form.record_begin = res.data.record_begin;
			this.form.remark = res.data.remark;
		},
		changeDate(e) {
			this.form.record_date = e.detail.value;
		},
		changeBegin(e) {
			this.form.record_begin = e.detail.value;
		},
		changeEnd(e) {
			this.form.record_end = e.detail.value;
		},
		changeType(e) {
			this.logI(tagInfo, "changType", e);
			this.typeIndex = e.detail.value;
			this.typeList.forEach((item, index) => {
				if (index == e.detail.value) {
					console.log("item", item);
					this.form.type_id = item.id;
					this.typeName = item.name;
				}
			});
		},
		async submit() {
			let that = this;
			let res;
			if (this.id == 0) {
				res = await Manager.recordAdd(this.form);
			} else {
				res = await Manager.recordEdit(this.form);
			}
			if (res.code != 0) {
				this._util.message.alert(res.msg);
				return;
			}
			let resAlert = await UniHelper.alert("操作成功");
			this.navigateBack();
			/* uni.showModal({
				content: "操作成功",
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						that.navigateBack();
					}
				}
			}); */
		},
		async deleteRecord() {
			let that = this;
			let res = await this._util.message.confirm("提示", "确定要删除这条记录吗？");
			if (!res) {
				return;
			}
			res = await Manager.recordDelete(this.id);
			if (res.code != 0) {
				this._util.message.alert(res.msg);
				return;
			}
			uni.showModal({
				content: "删除成功",
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						that.navigateBack();
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
</style>
